<template>
    <li>
        <div class="index">{{index}}</div>
        <div class="content">
            <div>姓名：{{user.username}}</div>
            <div>年龄：{{user.age}}</div>
            <div>性别：{{user.sex}}</div>
            <div>电话号：{{user.phoneNum}}</div>
        </div>
    </li>
</template>

<script>
  export default {
    name: 'user_li',
    props: ['index', 'user']
  }
</script>

<style scoped>
    li {
        list-style: none;
        margin: 10px;
        padding: 10px;
        background: cadetblue;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .index{
        width: 30px;
        text-align: center;
    }
    .content {
        display: flex;
        flex-direction: column;
    }
</style>